<template>
  <div class="container">
    <div class="title">请完善信息</div>
    <div class="tips">如实填写信息，通过企业认证将获取更优质的功能和服务</div>
    <div class="line"></div>
    <div class="frombox">
      <div class="logo-nane">
        <div id="headImg">
          <div id="myPhoto">
            <div class="viewPhoto" @click="monidianji">
              <!-- <i class="el-icon-plus"></i> -->
              <img
                :src="imageSave"
                alt=""
                id="portrait"
                style="width: 350px;height: 250px"
              />
            </div>
            <div class="listBox">
              <input type="file" id="saveImage" name="myphoto" />
            </div>
            <div class="save">
              <!-- <el-button type="danger" size="small" @click="imageSubmit"
                                >上传头像</el-button
                              > -->
              <div style="margin-bottom:70px;padding-top: 30px">
                <span>{{ uploadDate }}</span>
              </div>
            </div>
          </div>
          <i class="el-icon-t" @click="monidianji">上传logo</i>
        </div>
        <div class="inp-3">
          <div class="company-name">
            <span>* <font>公司名称:</font> </span>
            <input type="text" class="int1" />
          </div>
          <div class="company-nature">
            <span> 公司性质: </span>
            <select class="select2_test">
              <option>请选择</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>
          </div>
          <div class="company-industry">
            <span> 公司行业: </span>
            <select class="select2_test">
              <option>请选择</option>
              <option value="1">1</option>
              <option value="2">2</option>
              <option value="3">3</option>
            </select>
          </div>
        </div>
        <div class="company-address">
          <span>* <font>公司所在地:</font> </span>
          <select class="select2_test">
            <option>请选择</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
          <select class="select2_test">
            <option>请选择</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
          <input class="select3_test" />
          <div class="pic">
            <img src="../../assets/Verification/gouhao.png" alt="" />
          </div>
        </div>
        <div class="company-zz">
          <span>* <font>营业执照:</font> </span>
          <div class="file-box">
            <input type="file" class="file-btn" />
            上传
          </div>
          <p>注：图片格式为 JPG/JPEG/PNG/PDF 大小在2MB内</p>
        </div>
        <div class="xydm">
          <span>* <font> 社会信用代码 :</font> </span>
          <input type="text" class="int1" />
        </div>
        <div class="name-fr">
          <span>* <font> 法人姓名 :</font> </span>
          <input type="text" class="int1" />
        </div>
        <div class="name-fr-zh">
          <span>* <font> 法人身份证号 :</font> </span>
          <input type="text" class="int1" />
        </div>
        <div class="name-fr-zh-a">
          <span> <font> 对公银行账号:</font> </span>
          <input type="text" class="int1" />
        </div>
        <div class="name-fr-zh-b">
          <span> <font> 对公开户行： :</font> </span>
          <input type="text" class="int1" />
        </div>
      </div>
      <div class="sub">
        <div class="submit">提交</div>
        <div class="resubmit">取消</div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        imageSave: '', //图片路径
        uploadDate: '' //上传时间
      }
    },
    methods: {
      //图片库模拟点击input file
      monidianji() {
        document.getElementById('saveImage').click()
      },
      yulan() {
        document.getElementById('saveImage').onchange = function() {
          var imgFile = this.files[0]
          var fr = new FileReader()
          fr.onload = function() {
            document.getElementById('portrait').src = fr.result
          }
          fr.readAsDataURL(imgFile)
        }
      },
      //上传
      imageSubmit() {
        let _this = this
        let x = document.getElementById('saveImage').files[0]
        let params = new FormData() //创建一个form对象
        params.append('file', x, x.name) //append 向form表单添加数据
        //添加请求头  通过form添加的图片和文件的格式必须是multipart/form-data
        let config = { headers: { 'Content-Type': 'multipart/form-data' } }
        //发起ajax请求存放在服务端
        this.$axios
          .post(api.personHeadImg, params, config)
          .then(function(res) {
            _this.imageSave = res.data.lujing
            let mydate = new Date()
            _this.uploadDate = '上传时间：' + mydate.toLocaleString()
            _this.$notify({
              type: 'success',
              message: '上传成功!',
              offset: 160
            })
          })
          .catch(function(error) {
            console.log(error)
            _this.$notify({
              type: 'warning',
              message: '上传失败!',
              offset: 160
            })
          })
      }
    },
    mounted() {
      this.yulan() //预览图片
    }
  }
</script>
<style lang="less" scoped>
  .container {
    width: 1320px;
    margin: auto;
    height: 1080px;
    background-color: #ccc;
    opacity: 0.8;
    .title {
      margin: auto;
      padding-top: 51px;
      width: 126px;
      height: 24px;
      font-size: 25px;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: rgba(102, 102, 102, 1);
      line-height: 26px;
    }
    .tips {
      margin: auto;
      margin-top: 29px;
      width: 534px;
      height: 21px;
      font-size: 21px;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: rgba(102, 102, 102, 1);
      line-height: 26px;
    }
    .line {
      margin-top: 35px;
      width: 1320px;
      border: 1px dashed rgba(191, 191, 191);
    }
    .logo-nane {
      height: 250px;
      width: 1320px;
      .inp-3 {
        width: 450px;
        height: 250px;
        position: relative;
        left: 763px;
        top: -103px;
        .company-name {
          position: absolute;
          top: 28px;
          width: 450px;
          height: 45px;
          span {
            width: 89px;
            height: 17px;
            font-size: 18px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: rgba(255, 0, 0, 1);
            line-height: 26px;
            font {
              color: #666;
              font-weight: normal;
            }
          }
          .int1 {
            width: 320px;
            height: 45px;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(221, 221, 221, 1);
            border-radius: 2px;
            margin-left: 10px;
          }
        }
        .company-nature {
          position: absolute;
          top: 111px;
          left: 13px;
          width: 450px;
          height: 45px;
          span {
            width: 89px;
            height: 17px;
            font-size: 18px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #666;
            line-height: 26px;
          }
          .select2_test {
            margin-left: 6px;
            width: 320px;
            height: 45px;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(221, 221, 221, 1);
            border-radius: 2px;
            option {
              width: 320px;
              height: 45px;
            }
          }
        }
        .company-industry {
          position: absolute;
          top: 193px;
          left: 13px;
          width: 450px;
          height: 45px;
          span {
            width: 89px;
            height: 17px;
            font-size: 18px;
            font-family: Adobe Heiti Std;
            font-weight: normal;
            color: #666;
            line-height: 26px;
          }
          .select2_test {
            margin-left: 6px;
            width: 320px;
            height: 45px;
            background: rgba(255, 255, 255, 1);
            border: 1px solid rgba(221, 221, 221, 1);
            border-radius: 2px;
            option {
              width: 320px;
              height: 45px;
            }
          }
        }
      }
      .company-address {
        position: absolute;
        top: 528px;
        margin-left: 33px;
        width: 450px;
        height: 45px;
        span {
          width: 89px;
          height: 17px;
          font-size: 18px;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          color: rgba(255, 0, 0, 1);
          line-height: 26px;
          font {
            color: #666;
            font-weight: normal;
          }
        }
        .select2_test {
          margin-left: 6px;
          width: 140px;
          height: 45px;
          background: rgba(255, 255, 255, 1);
          border: 1px solid rgba(221, 221, 221, 1);
          border-radius: 2px;
          option {
            width: 320px;
            height: 45px;
          }
        }
        .select3_test {
          position: relative;
          margin-left: 406px;
          top: -44px;
          width: 743px;
          height: 40px;
          background: rgba(255, 255, 255, 1);
          border: 1px solid rgba(221, 221, 221, 1);
          border-radius: 2px;
        }
      }
      .company-zz {
        position: absolute;
        top: 628px;
        margin-left: 37px;
        width: 450px;
        height: 45px;
        span {
          width: 109px;
          height: 17px;
          font-size: 18px;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          color: rgba(255, 0, 0, 1);
          line-height: 26px;
          font {
            color: #666;
            font-weight: normal;
          }
        }
        .file-box {
          display: inline-block;
          position: relative;
          left: 20px;
          text-align: center;
          width: 81px;
          line-height: 45px;
          height: 45px;
          padding: 3px 5px;
          /* overflow: hidden; */
          color: #fff;
          background-color: #58a3f7;
        }

        .file-btn {
          position: absolute;
          width: 81px;
          height: 45px;
          top: 0;
          left: 20px;
          outline: none;
          background-color: transparent;
          filter: alpha(opacity=0);
          -moz-opacity: 0;
          -khtml-opacity: 0;
          opacity: 0;
        }
        p {
          color: #ff0000;
          margin-left: 100px;
          width: 400px;
        }
      }
      .xydm {
        position: absolute;
        top: 638px;
        margin-left: 720px;
        width: 477px;
        height: 45px;
        span {
          width: 89px;
          height: 17px;
          font-size: 18px;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          color: rgba(255, 0, 0, 1);
          line-height: 26px;
          font {
            color: #666;
            font-weight: normal;
          }
        }
        .int1 {
          width: 320px;
          height: 45px;
          background: rgba(255, 255, 255, 1);
          border: 1px solid rgba(221, 221, 221, 1);
          border-radius: 2px;
          margin-left: 10px;
        }
      }
      .name-fr {
        position: absolute;
        top: 750px;
        margin-left: 43px;
        width: 477px;
        height: 45px;
        span {
          width: 89px;
          height: 17px;
          font-size: 18px;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          color: rgba(255, 0, 0, 1);
          line-height: 26px;
          font {
            color: #666;
            font-weight: normal;
          }
        }
        .int1 {
          width: 320px;
          height: 45px;
          background: rgba(255, 255, 255, 1);
          border: 1px solid rgba(221, 221, 221, 1);
          border-radius: 2px;
          margin-left: 10px;
        }
      }
      .name-fr-zh {
        position: absolute;
        top: 750px;
        margin-left: 720px;
        width: 477px;
        height: 45px;
        span {
          width: 89px;
          height: 17px;
          font-size: 18px;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          color: rgba(255, 0, 0, 1);
          line-height: 26px;
          font {
            color: #666;
            font-weight: normal;
          }
        }
        .int1 {
          width: 320px;
          height: 45px;
          background: rgba(255, 255, 255, 1);
          border: 1px solid rgba(221, 221, 221, 1);
          border-radius: 2px;
          margin-left: 10px;
        }
      }
      .name-fr-zh-a {
        position: absolute;
        margin-left: 25px;
        top: 858px;
        width: 477px;
        height: 45px;
        span {
          width: 89px;
          height: 17px;
          font-size: 18px;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          color: rgba(255, 0, 0, 1);
          line-height: 26px;
          font {
            color: #666;
            font-weight: normal;
          }
        }
        .int1 {
          width: 320px;
          height: 45px;
          background: rgba(255, 255, 255, 1);
          border: 1px solid rgba(221, 221, 221, 1);
          border-radius: 2px;
          margin-left: 10px;
        }
      }
      .name-fr-zh-b {
        position: absolute;
        top: 858px;
        margin-left: 734px;
        width: 477px;
        height: 45px;
        span {
          width: 89px;
          height: 17px;
          font-size: 18px;
          font-family: Adobe Heiti Std;
          font-weight: normal;
          color: rgba(255, 0, 0, 1);
          line-height: 26px;
          font {
            color: #666;
            font-weight: normal;
          }
        }
        .int1 {
          width: 320px;
          height: 45px;
          background: rgba(255, 255, 255, 1);
          border: 1px solid rgba(221, 221, 221, 1);
          border-radius: 2px;
          margin-left: 10px;
        }
      }
    }
    .sub {
      margin-top: 40px;
      margin-left: 550px;
      font-size: 18px;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: rgba(255, 255, 255, 1);
      text-align: center;
      cursor: pointer;
      .submit {
        float: left;
        margin-left: -100px;
        width: 180px;
        height: 50px;
        line-height: 50px;
        margin-top: 500px;
        background: rgba(88, 163, 247, 1);
        border-radius: 2px;
      }
      .resubmit {
        float: left;
        margin-top: 500px;
        margin-left: 50px;
        width: 180px;
        line-height: 50px;
        height: 50px;
        background: rgba(88, 163, 247, 1);
        border-radius: 2px;
      }
    }
    .pic {
      position: relative;
      width: 87px;
      height: 87px;
      left: 523px;
      top: -110px;
      img {
        display: inline-block;
        border: 1px dashed #000;
      }
    }
    #headImg {
      margin-left: 50px;
      .viewPhoto {
        border: 1px rgba(99, 199, 210, 0.79) dashed;
        width: 350px;
        height: 250px;
        background-image: url(../../assets/Verification/u3374.png);
        background-repeat: no-repeat;
        background-position: center;
      }
      #saveImage {
        display: none;
      }

      .save {
        margin: 30px auto;
      }
      .viewPhoto {
        position: relative;
        float: left;
        margin-right: 10%;
      }
      .el-icon-t {
        font-size: 19px;
        color: rgba(88, 163, 247, 1);
        position: absolute;
        margin-left: -296px;
        margin-top: 185px;
        /* left: 24%; */
        /* top: 54%; */
        transform: translate(-50%, -50%);
        max-width: 50%;
        text-align: center;
        font-weight: normal;
        cursor: pointer;
      }
    }
  }
</style>
